<template>
    <div id="app">
        <div class="head">
            <div class="vague"></div>
            <div class="main">
                <div class="shop">
                    <img src="../assets/imgs/头像.webp" alt="" width="70px" height="70px">
                    <div class="content">
                        <p class="brand"><span>品牌</span>XXXXXXXXX</p>
                        <p class="meituan">XXXXXXXXX</p>
                        <p class="activitys"><span>满</span>XXXXXXXXX <button>5个  ></button></p>
                    </div>
                </div>
                <div class="Notice">
                    <p><span class="notice">公告</span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX <span class="direction">></span></p>
                </div>
            </div>
        </div>
        <!-- 总 -->
        <div class="big">
            <van-tabs v-model="activeName" class="left">
                <van-tab title="商品" to="/home"></van-tab>
                <van-tab title="评论" to="/evaluation"></van-tab>
                <van-tab title="商家" to="/merchants"></van-tab>
            </van-tabs>
            <router-view class="right"></router-view>
            <SettlementPage></SettlementPage>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import SettlementPage from "../components/SettlementPage.vue"
    export default Vue.extend({
        data() {
            return {
                activeName: 0,
            };
        },
        components:{SettlementPage}
    })
</script>

<style scoped lang="less">
#app{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .big{
        flex: 1;
        display: flex;
        flex-direction: column;
        .left{

        }
        .right{
            flex: 1;
        }
    }
    .head{
        width: 100%;
        height: 20%;
        position: relative;
        .vague{
            width: 100%;
            height: 100%;
            background: wheat url("../assets/imgs/bg.jpg") no-repeat;
            filter: blur(3px);
            background-size: cover;
        }
        .main{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            color: white;
            // box-sizing: border-box;
            .shop{
                padding: 17px 25px;
                display: flex;
                img{
                    border-radius: 5px;
                    margin-right: 15px;
                }
                .content{
                    width: 100%;
                    .brand{
                        font-weight: 700;
                        span{
                            background-color: #ee1514;
                            font-weight: 500;
                            font-size: 12px;
                            padding: 2px;
                            margin-right: 15px;
                        }
                    }
                    .meituan{
                        margin: 8px 0;
                    }
                    .activitys{
                        position: relative;
                        width: 100%;
                        height: 33px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        span{
                            background: #fefefe;
                            color: red;
                            font-size: 12px;
                            padding: 3px;
                            margin-right: 10px;
                        }
                        button{
                            border: 0px;
                            border-radius: 12px;
                            background: #1e1a1b5e;
                            padding: 3px 13px;
                            position: absolute;
                            right: 15px;
                        }
                    }
                }
            }
            .Notice{
                p{
                    background: rgba(45, 43, 43, 0.436);
                    height: 35px;
                    line-height: 35px;
                    font-size: 12px;
                    padding: 0 20px;
                    position: relative;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    .notice{
                        color: black;
                        background: white;
                        font-weight: 600;
                        padding: 2px 3px;
                        margin-right: 10px;
                    }
                    .direction{
                        position: absolute;
                        right: 10px;
                    }
                }
            }
        }
    }
}
</style>